<template>
	<view class="addmanagement">
		<view class="addmanagement_content">
			<view class="order_title Order">
				<view class="title_left">
					收货人
				</view>
				<view class="title_right">
					<input type="text" v-model="name" placeholder="请输入收货人" placeholder-style="color:#9DA5A8;font-size:28rpx"/>
				</view>
			</view>
			<view class="order_title Order">
				<view class="title_left">
					联系电话
				</view>
				<view class="title_right">
					<input type="number" v-model="phone" placeholder="请输入联系电话" placeholder-style="color:#9DA5A8;font-size:28rpx"/>
				</view>
			</view>
			<view class="order_title">
				<view class="title_left">
					所在地区
				</view>
				<view class="title_right">
					                    	<view @tap="togglePopup('bottom','popup')" style="display: flex;align-items: center;">
					                    			<view v-for="(item, index) in selectList" :key="index">
					                    				{{item.txt}}<span v-show="index == 0 || index == 1">—</span>
					                    			</view>
					                    		</view>
					                    		<uni-popup ref="popup" :type="type" @change="change">
					                    			<view class="select-border">
					                    				<view class="header">
					                    					<view class="title">
					                    						选择地区
					                    					</view>
					                    					<view class="cancel-icon" @tap="cancel('popup')">
					                    						X
					                    					</view>
					                    				</view>
					                    				<view class="select-box">
					                    					<view class="select-item">
					                    						<view class="select-list" @tap="tabEvent(index)" :class="indexTab == index ? 'selected' : ''" v-for="(item, index) in selectList"
					                    						 :key="index">
					                    							{{item.txt}}
					                    						</view>
					                    					</view>
					                    					<view class="select-item-box">
					                    						<!-- 省 -->
					                    						<view class="province-box" v-show="proviceShow">
					                    							<view class="select-list-cont" @tap="provinceEvent(item,index)" v-for="(item,index) in provinceData" :key="item.code">
					                    								{{item.name}}<span class="check" v-show="index == checkOne">√</span>
					                    							</view>
					                    						</view>
					                    						<!-- 市 -->
					                    						<view class="city-box" v-show="cityShow">
					                    							<view class="select-list-cont" @tap="cityEvent(item,index)" v-for="(item,index) in cityData" :key="item.code">
					                    								{{item.name}}<span class="check" v-show="index==checkTwo">√</span>
					                    							</view>
					                    						</view>
					                    						<!-- 区 -->
					                    						<view class="area-box" v-show="areaShow">
					                    							<view class="select-list-cont" @tap="areaEvent(item,index)" v-for="(item,index) in areaData" :key="item.code">
					                    								{{item.name}}<span class="check" v-show="index==checkThree">√</span>
					                    							</view>
					                    						</view>
					                    					</view>
					                    				</view>
					                    			</view>
					                    		</uni-popup>

				</view>
			</view>
			<view class="order_title Order">
				<textarea placeholder-style="color:#9DA5A8;font-size:28rpx" placeholder="详细地址" v-model="address"/>
			</view>
		</view>
		<view class="order_title Order order_status">
			<view class="status_title">
				设为默认地址
			</view>
			<view class="radio" :class="status?1:'radioActive'" @click="radiochange()"></view>
		</view>
		<view class="button">
			<button type="warn" @click="addmanagement">保存</button>
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/api/md5.js'
	import {requestUrl} from '@/common/config.js'
	import cityDatas from '@/common/api/city.area.js'
	import uniPopup from '@/components/uni-popup/popup.vue'
	export default {
				components: {
					uniPopup
				},
		data() {
			return {
				name:'',
				phone:'',
				street:'',
				status:false,
				address:'',
				address_id:'',
				e:'',
				provinceData: cityDatas,
				cityData: [],
				areaData: [],
				selectList: [{
					txt: '请选择所在地区'
				}, {
					txt: ''
				}, {
					txt: ''
				}],
				tabOne: '请选择',
				indexTab: 0,
				proviceShow: true,
				areaShow: false,
				cityShow: false,
				show: false,
				type: 'bottom',
				checkOne: null,
				checkTwo: null,
				checkThree: null,
			}
		},
		onShow() {
				if(uni.getStorageSync('access_token')){
				this.access_token=JSON.parse(uni.getStorageSync('access_token'))
				}else{
					uni.showModal({
					    title: '提示',
					    content: '你还未登录，请先登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
					        } else if (res.cancel) {
					        }
					    }
					});
				}
			if(uni.getStorageSync('e')){
			this.e=JSON.parse(uni.getStorageSync('e'))
			}
			if(this.e.status=='1'){
				this.status=true
			}else{
				this.status=false
			}
			this.name=this.e.name
			this.phone=this.e.phone
			this.address=this.e.address
			this.selectList[0].txt=this.e.province
			this.selectList[1].txt=this.e.city
			this.selectList[2].txt=this.e.district
		},
		methods: {
			addmanagement(){
				if (!this.phone) {
					return uni.showToast({
						title: '请填写手机号',
						icon:'none'
					});
				}
				if (!this.name) {
					return uni.showToast({
						title: '请输入收货人姓名',
						icon:'none'
					});
				}
				if (!this.selectList[0]) {
					return uni.showToast({
						title: '请输入收货地址',
						icon:'none'
					});
				}
				let status
				if(this.status){
					status='1'
				}else{
					status='0'
				}
				if(uni.getStorageSync('access_token')){
				this.access_token=JSON.parse(uni.getStorageSync('access_token'))
				}
				let time = Math.round(new Date().getTime() / 1000).toString()
				let _this = this
				let Time = ['time', time].join('=')
				let Access_token = ['access_token', this.access_token].join('=')
				let content = ['content=pinet.FeiMao.2017'].join()
				let arr = [content, Time].sort(function(a, b) {
					a - b
				})
				let newarr = md5(arr.join('&'))
				uni.request({
					url: requestUrl+'/app/address/saveAddress',
					method: "GET",
					data: {
						access_token: JSON.parse(uni.getStorageSync('access_token')),
						time: time,
						sign: newarr,
						province:this.selectList[0].txt,
						city:this.selectList[1].txt,
						district:this.selectList[2].txt,
						address:this.address,
						name:this.name,
						phone:this.phone,
						status:status,
						address_id:this.e.address_id
					},
					success: function(res) {
							uni.showToast({
								title:res.data.message,
								icon:'none',
								duration:2000
							})
							if(res.data.errcode==0){
								uni.navigateBack({
									delta: 1
								});
							}
					}
				});
			},
			radiochange(){
				this.status=!this.status
			},
				togglePopup(type, open) {
				this.type = type
				if (open === 'tip') {
					this.show = true
				} else {
					this.$refs[open].open()
				}
			},
			cancel(type) {
				if (type === 'tip') {
					this.show = false
					return
				}
				this.$refs[type].close()
			},
			change(e) {
				if (e.show == true) {
					uni.hideTabBar()
				} else {
					uni.showTabBar()
				}
			},
			tabEvent(index) {
				this.indexTab = index
				if (this.indexTab == 0) {
					this.proviceShow = true
					this.cityShow = false
					this.areaShow = false
					// this.checkOne = null
					this.checkTwo = null
					this.checkThree = null
					// this.cityData = []
					this.areaData = []
					// this.selectList[0].txt = "请选择"
					this.selectList[1].txt = "请选择"
					this.selectList[2].txt = "请选择"
				} else if (this.indexTab == 1) {
					this.proviceShow = false
					this.cityShow = true
					this.areaShow = false
					// this.checkTwo = null
					this.checkThree = null
					// this.areaData = []
					// this.selectList[1].txt = "请选择"
					this.selectList[2].txt = "请选择"
				} else if (this.indexTab == 2) {
					this.proviceShow = false
					this.cityShow = false
					this.areaShow = true
				}
			},
			provinceEvent(data, index) {
				this.checkOne = index
				this.selectList[0].txt = data.name
				this.indexTab = 1
				this.proviceShow = false
				this.cityShow = true
				this.areaShow = false
				this.cityData = data.cityList
			},
			cityEvent(data, index) {
				this.checkTwo = index
				this.selectList[1].txt = data.name
				this.indexTab = 2
				this.proviceShow = false
				this.cityShow = false
				this.areaShow = true
				this.areaData = data.areaList
			},
			areaEvent(data, index) {
				this.checkThree = index
				this.selectList[2].txt = data.name
			}

		}
	}
</script>

<style lang="less" scoped>
	.addmanagement{
		height: 100%;
		background-color: #F3F4F5;
		padding-top: 20rpx;
		.addmanagement_content{
			margin-bottom: 20rpx;
		}
		.order_title{
			display: flex;
			padding: 20rpx 40rpx;
			border-bottom:1px solid #EEEEEE;
			background: url(/pagesA/static/direction_right_gray.png)no-repeat 690rpx 22rpx ;
			background-size: 28rpx 28rpx;
			background-color: #fff;
			.title_left{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				width: 160rpx;
			}
			.title_right{
				flex: 1;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9DA5A8;
				padding-right: 30rpx;
			}
		}
		.Order{
			background: #fff;
		}
		.order_status{
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			position: relative;
			margin-bottom: 20rpx;
			.status_title{
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
			}
			.radio {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 33rpx;
				right: 40rpx;
				background: url(@/static/selected%20active.png) 0px 0px;
				background-size: 32rpx 32rpx;
			}
			
			.radioActive {
				background: url(@/static/selected／on.png) 0px 0px;
				background-size: 32rpx 32rpx;
			}
		}
		.button {
				width: 100%;
				margin: 0 auto;
				padding: 14rpx 0;
				button{
					border-radius: 20px;
					line-height: 80rpx;
				}
			}
			.savebottom {
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
	.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 35upx;
		}
	 
		.title {
			font-size: 34upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	 
		.cancel-icon {
			font-size: 34upx;
			color: rgba(153, 153, 153, 1);
		}
	 
		.check {
			padding-left: 17upx;
			color: #FF7E28;
		}
	 
		.select-box {
			height: 1024upx;
		}
	 
		.select-item {
			display: flex;
			align-items: center;
			padding-left: 50upx;
			margin-bottom: 20upx;
			border-bottom: 1px solid #F6F6F6;
		}
	 
		.select-list {
			width: 120upx;
			height: 40upx;
			text-align: center;
			overflow: hidden;
			/*超出部分隐藏*/
			text-overflow: ellipsis;
			/* 超出部分显示省略号 */
			white-space: nowrap;
			/*规定段落中的文本不进行换行 */
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			margin-right: 30upx;
			border-bottom: 1px solid #FFFFFF;
		}
	 
		.select-list-cont {
			padding-left: 67upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 40px;
		}
	 
		.selected {
			border-bottom: 1px solid #F0AD4E;
			color: rgba(255, 133, 0, 1);
		}

</style>
